<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<!-- 载入文章头部页面，位置在/client文件夹下的header模板页面，模板名称th:fragment为header -->
<div th:replace="client/header::header(${articleList[0].categoryName},null)"/>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<body>
<div class="layui-container" style="padding-top: 100px">
    <div>
         <span class="layui-breadcrumb" lay-separator="|">
           <a th:href="@{/category(cid=1)}">Java开发</a>
            <a th:href="@{/category(cid=2)}">C++开发</a>
            <a th:href="@{/category(cid=3)}">Python开发</a>
            <a th:href="@{/category(cid=4)}">开发常用工具</a>
            <a th:href="@{/category(cid=5)}">日常点滴分享</a>
            <a th:href="@{/category(cid=6)}">求职经历分享</a>
            <a th:href="@{/category(cid=7)}">前端琐事</a>
            <a th:href="@{/category(cid=8)}">其他</a>
            <a th:href="@{/category(cid=9)}">HarmonyOS</a>
        </span>
    </div>
    <div class="layui-row">
        <div class="layui-col-md9">
            <div class="text-center">
                <img th:src="@{${category.image}}">
            </div>
            <div th:each="article : ${articleList}">
<!--                遍历文章-->
                <br>
                <div class="card rounded-lg rounded-pill layui-anim layui-anim-down">
                    <div class="card-body" style="margin:10px 10px">
<!--                        标题-->
                        <a th:href="@{'/article/'+${article.id}}"><strong><h3 class="card-title" th:text="${article.title}">title</h3></strong></a>
<!--                        截取正文-->
                        <p class="card-text" th:utext="${commons.intro(article,160)}" ></p>
<!--                        信息-->
                        <p class="card-text">
                            <a th:href="@{'/user/'+${article.username}}" th:text="${article.username}" class="layui-text"></a>
                            <small class="text-muted" th:text="'  发布于  '+ ${commons.dateFormat(article.created)}"></small>
                            &nbsp&nbsp;<small class="text-muted" th:text="${article.commentsNum}+'评论' "></small>
                            &nbsp;<small class="text-muted" th:text="${article.hits}+'浏览'"></small>
                        </p>
                    </div>
                </div>
            </div>
        </div>
        <div class="layui-col-md3">
            <div id="calendar"></div>
        </div>
    </div>
</div>
</body>
<!-- 载入文章尾部页面，位置在/client文件夹下的footer模板页面，模板名称th:fragment为footer -->
<div th:replace="client/footer::footer"/>
</html>
